<template>
  <el-menu-item
    v-if="item.leaf"
    :index="item.id"
    :key="item.id"
    :disabled="item.disabled"
  >
    <div class="menu-name">{{ item.name }}</div>
  </el-menu-item>

  <el-submenu
    v-else
    :index="item.id"
    :key="item.id"
    :disabled="item.disabled"
    popper-class="sub-popper"
  >
    <template slot="title">
      <div class="menu-name">{{ item.name }}</div>
    </template>
    <menu-tree-item
      v-for="child in item.children"
      :key="child.id"
      :item="child"
    />
  </el-submenu>
</template>

<script>
export default {
  name: "MenuTreeItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
    index: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>